<template>
  <div>
    <div>
      <table-btns
        :tableTopOperateData="listData.tableTopOperate"
        :tableTopBatchOperate="listData.tableTopBatchOperate"
        :selectedData="selectedData"
        :requestApi="listData.requestApi"
        :basePath="basePath"
        @exportData="exportData"
        @actionsChange="getData"
      >
      </table-btns>
    </div>
    <!-- 表格内容 start  -->
    <Table
      ref="table"
      :columns="columns"
      :data="tableDataList"
      :loading="loading"
      height='500'
      class="ivu-mt"
      stripe
      border
      @on-filter-change="handleFilterChange"
      @on-select="handleSelect"
      @on-select-cancel="handleSelectCancel"
      @on-select-all="handleSelectAll"
      @on-select-all-cancel="handleSelectAllCancel"
    >
      <template slot-scope="{ row }" slot="auditState">
        <span v-if="row.auditState === '2'">审核通过</span>
        <span v-else-if="row.auditState === '3'">审核未通过</span>
        <span v-else>未审核</span>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <table-actions
          :requestApi="listData.requestApi"
          :basePath="basePath"
          :rowData="row"
          :indexData="index"
          @actionsChange="getData"
          @child-showpop="childshowpop"
        />
      </template>
    </Table>
    <!-- 表格内容 end  -->
    <!-- 分页 start  -->
    <div class="ivu-mt ivu-text-center">
      <Page
        :total="totalNum"
        show-total
        show-sizer
        transfer
        :current.sync="nowPage"
        @on-change="getData"
        @on-page-size-change="handleChangePage"
      />
    </div>
    <!-- 分页 end  -->
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import util from '@/libs/util';
import { ApiRequest } from '@api/basePage';
import tables from '@/mixins/dynamictable'; // 混入通用代码
import qwSelect from '@/components/common/formItem/qwSelect'; // 表单select组件
import qwDatePicker from '@/components/common/formItem/qwDatePicker'; // 表单日期组件
import qwSelectTree from '@/components/common/formItem/qwSelectTree'; // 表单下拉树组件
import tableActions from './tableActions'; // 表格操作项
import tableBtns from './tableBtns'; // 表格内部操作按钮

export default {
  mixins: [tables],
  props: {
    dynamicData: {
      type: Object
    },
    pagePath: {
      type: String
    }
  },
  computed: {
    ...mapState('admin/baseList', [
      'listData',
      'searchFormData',
      'searchFormDataQ'
    ])
  },
  components: {
    qwSelect,
    qwDatePicker,
    qwSelectTree,
    tableActions,
    tableBtns
  },
  data () {
    return {
      util: util,
      basePath: this.dynamicData.basePath, // 拼接基础路径
      showProp: false
    };
  },
  created () {},
  methods: {
    ...mapMutations('admin/baseList', ['setTableRowData']),
    // 获取表格的数据
    getData () {
      this.selectedData = [];
      let searchParam = [];
      if (!this.searchFormData.auditState) {
        this.searchFormData.auditState = '2,3'
      }
      Object.keys(this.searchFormData).forEach((key) => {
        searchParam.push({
          name: key,
          value: this.searchFormData[key]
        });
      });
      Object.keys(this.searchFormDataQ).forEach((key) => {
        searchParam.push({
          name: key,
          value: this.searchFormDataQ[key]
        });
      });
      // searchParam.push(
      //   { name: 'auditState', value: '3' },
      //   { name: 'auditState_q', value: 'Like' }
      // );
      let data = {
        nowPage: this.nowPage,
        pageShow: this.pageShow,
        searchParam: JSON.stringify(searchParam)
      };

      this.loading = true;
      // 开始请求列表
      ApiRequest(
        this.listData.requestApi.getTableList.url,
        this.listData.requestApi.getTableList.type,
        data
      ).then((res) => {
        /* let rData = res;
        if (rData.retData !== '') {
          rData.retData = rData.retData;
        }
        let tableDataList = rData.retData.results;
        tableDataList.forEach((item) => {
          let actions = [];
          // let auditMap = {
          // 	"1": "未审核",
          // 	"2": "审核通过",
          // 	"3": "审核未通过"
          // }
          // item.auditStateStr = '未知';
          // if (item.auditState) {
          // 	item.auditStateStr = auditMap[item.auditState];
          // }
          let brandStateMap = {
            1: '启用',
            2: '禁用'
          };
          item.brandStateStr = '未知';
          if (item.brandState) {
            item.brandStateStr = brandStateMap[item.brandState];
          }
          let levelMap = {
            1: '高',
            2: '中高',
            3: '中',
            4: '中低',
            5: '低'
          };
          item.insideLevelStr = '未知';
          if (item.insideLevel) {
            item.insideLevelStr = levelMap[item.insideLevel];
          }
          item.outsideLevelStr = '未知';
          if (item.outsideLevel) {
            item.outsideLevelStr = levelMap[item.outsideLevel];
          }
          // if (item.editStatus == '2') {
          // 	actions.push({
          // 		name: 'Edit',
          // 		label: '编辑',
          // 		handleType: 'Edit'
          // 	})
          // }

          actions.push({
            name: 'Delete',
            label: '删除',
            handleType: 'link'
          });

          actions.push({
            name: 'View',
            label: '查看',
            handleType: 'View'
          });
          actions.push({
            name: 'ReAudit',
            label: '重新编辑',
            handleType: 'link'
          });
          item.actions = actions;
        });
        // 增加表格操作项
        this.tableDataList = rData.retData.results;
        this.totalNum = rData.retData.totalNum;
        this.loading = false; */
        const successBtns = [{
          name: 'View',
          label: '查看',
          handleType: 'View'
        }]
        const failBtns = [
          {
            name: 'Delete',
            label: '删除',
            handleType: 'link'
          },
          {
            name: 'View',
            label: '查看',
            handleType: 'View'
          },
          {
            name: 'ReAudit',
            label: '重新编辑',
            handleType: 'link'
          }
        ]
        const emptyBtns = [
          {
            name: '',
            label: '',
            handleType: ''
          }
        ]
        const BtnsMaps = {
          '2': successBtns,
          '3': failBtns
        }
        this.loading = false
        const brandStateMap = {
          1: '启用',
          2: '禁用'
        };
        const levelMap = {
          1: '高',
          2: '中高',
          3: '中',
          4: '中低',
          5: '低'
        };
        if (res?.retData) {
          const { results = [], totalNum } = res.retData
          this.tableDataList = results.map(item => ({
            ...item,
            _disabled: item.auditState == '2',
            brandStateStr: brandStateMap[item.brandState] ?? '未知',
            insideLevelStr: levelMap[item.insideLevel] ?? '未知',
            outsideLevelStr: levelMap[item.insideLevel] ?? '未知',
            actions: BtnsMaps[item.auditState] ?? emptyBtns
          }))
          this.totalNum = totalNum
        }
      });
    },
    childshowpop (data) {
      this.showProp = data;
    }
  }
};
</script>
<style lang="less" scoped>
.i-table-no-border .ivu-table-header th {
  background: #f8f8f8;
}

.height30 {
  height: 30px;
  line-height: 30px;
  margin-bottom: 10px;
}
</style>
